<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">.wrapInner()</h1>
<div class="entry-meta">
						所属分类：<span class="category"><a href="/category/manipulation/">DOM 操作</a> &gt; <a href="/category/manipulation/dom-insertion-around/">DOM 插入并包裹现有内容</a></span>
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/wrapInner/" target="_blank">.wrapInner()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="wrapInner1"><h2 class="section-title">
<span class="name">.wrapInner( wrappingElement )</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>在匹配元素里的内容外包一层结构。</p>
<ul class="signatures">
<li class="signature" id="wrapInner-wrappingElement">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.2/">1.2</a></span>.wrapInner( wrappingElement )</h4>
<ul><li>
<div><strong>wrappingElement</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>用来包在匹配元素的内容外面的HTML片段，选择表达式，jQuery对象或者DOM元素。</div>
</li></ul>
</li>
<li class="signature" id="wrapInner-functionindex">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.4/">1.4</a></span>.wrapInner( function(index) )</h4>
<ul><li>
<div><strong>function(index)</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>一个返回HTML结构的函数，用来包在匹配元素内容的外面。接收集合中元素的索引位置作为参数。在函数中 ，<code>this</code>指向集合中当前的元素。/div&gt;
			
			
			
			<div class="longdesc" id="entry-longdesc">
<p><code>.wrapInner()</code>函数可以接受任何字符串或对象，可以传递给<code>$()</code>工厂函数来指定一个DOM结构。这种结构可以嵌套多层，但是最内层只能有一个元素。每个匹配元素的内容都会被这种结构包裹。</p>
<p>考虑下面的HTML：</p>
<div class="syntaxhighlighter xml nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"container"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"inner"</span>&gt;</span>Hello<span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"inner"</span>&gt;</span>Goodbye<span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>用<code>.wrapInner()</code>, 我们可以再inner元素的内容外加一个新的<code>&lt;div&gt;</code>元素，像这样:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'.inner'</span>).wrapInner(<span class="string">'&lt;div class="new" /&gt;'</span>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>结果如下：</p>
<div class="syntaxhighlighter xml nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"container"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"inner"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>    <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"new"</span>&gt;</span>Hello<span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"inner"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>    <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"new"</span>&gt;</span>Goodbye<span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>该方法的第二种用法允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容。例如：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'.inner'</span>).wrapInner(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">return</span> <span class="string">'&lt;div class="'</span> + <span class="keyword">this</span>.nodeValue + <span class="string">'" /&gt;'</span>;</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>这将使得每个<code>&lt;div&gt;</code>有和他文本内容一样名字的class:</p>
<div class="syntaxhighlighter xml nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"container"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"inner"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>    <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"Hello"</span>&gt;</span>Hello<span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"inner"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>    <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"Goodbye"</span>&gt;</span>Goodbye<span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p><strong>注意:</strong> 当通过一个选择器字符串传递给<code>.wrapInner()</code> 函数，其参数应该是格式正确的 HTML，并且 HTML 标签应该是被正确关闭的。下面是一些正确的例子：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(elem).wrapInner(<span class="string">"&lt;div class='test' /&gt;"</span>);</code></div></div><div class="container"><div class="line"><code>$(elem).wrapInner(<span class="string">"&lt;div class='test'&gt;&lt;/div&gt;"</span>);</code></div></div><div class="container"><div class="line"><code>$(elem).wrapInner(<span class="string">"&lt;div class=\"test\"&gt;&lt;/div&gt;"</span>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4>Example: <span class="desc">选中所有段落，然后在段落内容外加粗体：</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"><span class="tag">p</span> <span class="rules">{ <span class="rule"><span class="attribute">background</span>:<span class="value"><span class="hexcolor">#bbf</span>;</span></span> <span class="rule">}</span></span></span><span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">p</span>&gt;</span>Hello<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">p</span>&gt;</span>cruel<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">p</span>&gt;</span>World<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript">$(<span class="string">"p"</span>).wrapInner(<span class="string">"&lt;b&gt;&lt;/b&gt;"</span>);</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-1">
<h4>Example: <span class="desc">为 body 元素的内容包裹一个对象树</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="tag">div</span> <span class="rules">{ <span class="rule"><span class="attribute">border</span>:<span class="value"><span class="number">2</span>px green solid;</span></span> <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">2</span>px;</span></span> <span class="rule"><span class="attribute">padding</span>:<span class="value"><span class="number">2</span>px;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">p</span> <span class="rules">{ <span class="rule"><span class="attribute">background</span>:<span class="value">yellow;</span></span> <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">2</span>px;</span></span> <span class="rule"><span class="attribute">padding</span>:<span class="value"><span class="number">2</span>px;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  Plain old text, or is it?</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript">$(<span class="string">"body"</span>).wrapInner(<span class="string">"&lt;div&gt;&lt;div&gt;&lt;p&gt;&lt;em&gt;&lt;b&gt;&lt;/b&gt;&lt;/em&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;"</span>);</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-2">
<h4>Example: <span class="desc">选择所有的段落，并用 b 标签包裹每个匹配元素的内容。</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"><span class="tag">p</span> <span class="rules">{ <span class="rule"><span class="attribute">background</span>:<span class="value"><span class="hexcolor">#9f9</span>;</span></span> <span class="rule">}</span></span></span><span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">p</span>&gt;</span>Hello<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">p</span>&gt;</span>cruel<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">p</span>&gt;</span>World<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript">$(<span class="string">"p"</span>).wrapInner(document.createElement(<span class="string">"b"</span>));</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-3">
<h4>Example: <span class="desc">选择所有的段落，并用 jQuery object 包裹每个匹配元素的内容。</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="tag">p</span> <span class="rules">{ <span class="rule"><span class="attribute">background</span>:<span class="value"><span class="hexcolor">#9f9</span>;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="class">.red</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">red;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">p</span>&gt;</span>Hello<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">p</span>&gt;</span>cruel<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">p</span>&gt;</span>World<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript">$(<span class="string">"p"</span>).wrapInner($(<span class="string">"&lt;span class='red'&gt;&lt;/span&gt;"</span>));</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></section>
</div> </li></ul></li></ul></div>
</article><!-- #post-<?php the_ID(); ?> -->
</div>
<div class="widget-area" id="sidebar" role="complementary">
<aside class="widget" id="categories">
<ul>
<li class="cat-item cat-item-0">
<a href="/category/ajax/">Ajax</a>
<ul class="children">
<li class="cat-item cat-item-0">
<a href="/category/ajax/global-ajax-event-handlers/">全局 Ajax 事件处理器</a>
</li>
<li class="cat-item cat-item-1">
<a href="/category/ajax/helper-functions/">辅助函数</a>
</li>
<li class="cat-item cat-item-2">
<a href="/category/ajax/low-level-interface/">底层接口</a>
</li>
<li class="cat-item cat-item-3">
<a href="/category/ajax/shorthand-methods/">快捷方法</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-1">
<a href="/category/attributes/">DOM 属性</a>
</li>
<li class="cat-item cat-item-2">
<a href="/category/callbacks-object/">回调对象</a>
</li>
<li class="cat-item cat-item-3">
<a href="/category/core/">核心 API</a>
</li>
<li class="cat-item cat-item-4">
<a href="/category/css/">CSS</a>
</li>
<li class="cat-item cat-item-5">
<a href="/category/data/">数据操作</a>
</li>
<li class="cat-item cat-item-6">
<a href="/category/deferred-object/">延迟对象</a>
</li>
<li class="cat-item cat-item-7">
<a href="/category/deprecated/">弃用</a>
<ul class="children">
<li class="cat-item cat-item-0">
<a href="/category/deprecated/deprecated-1.3/">1.3 版本弃用的 API</a>
</li>
<li class="cat-item cat-item-1">
<a href="/category/deprecated/deprecated-1.4/">1.4 版本弃用的 API</a>
</li>
<li class="cat-item cat-item-2">
<a href="/category/deprecated/deprecated-1.7/">1.7 版本弃用的 API</a>
</li>
<li class="cat-item cat-item-3">
<a href="/category/deprecated/deprecated-1.8/">1.8 版本弃用的 API</a>
</li>
<li class="cat-item cat-item-4">
<a href="/category/deprecated/deprecated-1.9/">1.9 版本弃用的 API</a>
</li>
<li class="cat-item cat-item-5">
<a href="/category/deprecated/deprecated-1.10/">1.10 版本弃用的 API</a>
</li>
<li class="cat-item cat-item-6">
<a href="/category/deprecated/deprecated-3.0/">3.0 版本弃用的 API</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-8">
<a href="/category/dimensions/">尺寸</a>
</li>
<li class="cat-item cat-item-9">
<a href="/category/effects/">特效</a>
<ul class="children">
<li class="cat-item cat-item-0">
<a href="/category/effects/basics/">基本特效</a>
</li>
<li class="cat-item cat-item-1">
<a href="/category/effects/custom-effects/">自定义</a>
</li>
<li class="cat-item cat-item-2">
<a href="/category/effects/fading/">渐变</a>
</li>
<li class="cat-item cat-item-3">
<a href="/category/effects/sliding/">滑动</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-10">
<a href="/category/events/">事件</a>
<ul class="children">
<li class="cat-item cat-item-0">
<a href="/category/events/browser-events/">浏览器事件</a>
</li>
<li class="cat-item cat-item-1">
<a href="/category/events/document-loading/">文档加载</a>
</li>
<li class="cat-item cat-item-2">
<a href="/category/events/event-handler-attachment/">绑定事件处理器</a>
</li>
<li class="cat-item cat-item-3">
<a href="/category/events/event-object/">事件对象</a>
</li>
<li class="cat-item cat-item-4">
<a href="/category/events/form-events/">表单事件</a>
</li>
<li class="cat-item cat-item-5">
<a href="/category/events/keyboard-events/">键盘事件</a>
</li>
<li class="cat-item cat-item-6">
<a href="/category/events/mouse-events/">鼠标事件</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-11">
<a href="/category/forms/">表单</a>
</li>
<li class="cat-item cat-item-12">
<a href="/category/internals/">内部函数</a>
</li>
<li class="cat-item cat-item-13">
<a href="/category/manipulation/">DOM 操作</a>
<ul class="children">
<li class="cat-item cat-item-0">
<a href="/category/manipulation/class-attribute/">class 属性</a>
</li>
<li class="cat-item cat-item-1">
<a href="/category/manipulation/copying/">复制元素</a>
</li>
<li class="cat-item cat-item-2">
<a href="/category/manipulation/dom-insertion/">DOM 插入</a>
</li>
<li class="cat-item cat-item-3">
<a href="/category/manipulation/dom-insertion-around/">DOM 插入并包裹现有内容</a>
</li>
<li class="cat-item cat-item-4">
<a href="/category/manipulation/dom-insertion-inside/">DOM 插入现有元素内</a>
</li>
<li class="cat-item cat-item-5">
<a href="/category/manipulation/dom-insertion-outside/">DOM 插入现有元素外</a>
</li>
<li class="cat-item cat-item-6">
<a href="/category/manipulation/dom-removal/">DOM 移除</a>
</li>
<li class="cat-item cat-item-7">
<a href="/category/manipulation/dom-replacement/">DOM 替换</a>
</li>
<li class="cat-item cat-item-8">
<a href="/category/manipulation/general-attributes/">通用属性操作</a>
</li>
<li class="cat-item cat-item-9">
<a href="/category/manipulation/style-properties/">CSS 属性</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-14">
<a href="/category/miscellaneous/">杂项</a>
<ul class="children">
<li class="cat-item cat-item-0">
<a href="/category/miscellaneous/collection-manipulation/">集合操作</a>
</li>
<li class="cat-item cat-item-1">
<a href="/category/miscellaneous/data-storage/">数据存储</a>
</li>
<li class="cat-item cat-item-2">
<a href="/category/miscellaneous/dom-element-methods/">DOM 元素方法</a>
</li>
<li class="cat-item cat-item-3">
<a href="/category/miscellaneous/setup-methods/">设置</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-15">
<a href="/category/offset/">偏移</a>
</li>
<li class="cat-item cat-item-16">
<a href="/category/properties/">内部属性</a>
<ul class="children">
<li class="cat-item cat-item-0">
<a href="/category/properties/jquery-object-instance-properties/">jQuery 对象实例的属性</a>
</li>
<li class="cat-item cat-item-1">
<a href="/category/properties/global-jquery-object-properties/">全局 jQuery 对象的属性</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-17">
<a href="/category/removed/">已删除的函数</a>
</li>
<li class="cat-item cat-item-18">
<a href="/category/selectors/">选择器</a>
<ul class="children">
<li class="cat-item cat-item-0">
<a href="/category/selectors/attribute-selectors/">属性选择器</a>
</li>
<li class="cat-item cat-item-1">
<a href="/category/selectors/basic-css-selectors/">基础选择器</a>
</li>
<li class="cat-item cat-item-2">
<a href="/category/selectors/basic-filter-selectors/">基础过滤</a>
</li>
<li class="cat-item cat-item-3">
<a href="/category/selectors/child-filter-selectors/">子元素过滤</a>
</li>
<li class="cat-item cat-item-4">
<a href="/category/selectors/content-filter-selector/">内容过滤</a>
</li>
<li class="cat-item cat-item-5">
<a href="/category/selectors/form-selectors/">表单</a>
</li>
<li class="cat-item cat-item-6">
<a href="/category/selectors/hierarchy-selectors/">层级</a>
</li>
<li class="cat-item cat-item-7">
<a href="/category/selectors/jquery-selector-extensions/">jQuery 扩展</a>
</li>
<li class="cat-item cat-item-8">
<a href="/category/selectors/visibility-filter-selectors/">可见性过滤</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-19">
<a href="/category/traversing/">遍历</a>
<ul class="children">
<li class="cat-item cat-item-0">
<a href="/category/traversing/filtering/">过滤</a>
</li>
<li class="cat-item cat-item-1">
<a href="/category/traversing/miscellaneous-traversal/">其它遍历</a>
</li>
<li class="cat-item cat-item-2">
<a href="/category/traversing/tree-traversal/">树遍历</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-20">
<a href="/category/uncategorized/">未归类</a>
</li>
<li class="cat-item cat-item-21">
<a href="/category/utilities/">工具类</a>
</li>
<li class="cat-item cat-item-22">
<a href="/category/version/">版本</a>
<ul class="children">
<li class="cat-item cat-item-0">
<a href="/category/version/1.0/">1.0 版本</a>
</li>
<li class="cat-item cat-item-1">
<a href="/category/version/1.0.4/">1.0.4 版本</a>
</li>
<li class="cat-item cat-item-2">
<a href="/category/version/1.1/">1.1 版本</a>
</li>
<li class="cat-item cat-item-3">
<a href="/category/version/1.1.2/">1.1.2 版本</a>
</li>
<li class="cat-item cat-item-4">
<a href="/category/version/1.1.3/">1.1.3 版本</a>
</li>
<li class="cat-item cat-item-5">
<a href="/category/version/1.1.4/">1.1.4 版本</a>
</li>
<li class="cat-item cat-item-6">
<a href="/category/version/1.2/">1.2 版本</a>
</li>
<li class="cat-item cat-item-7">
<a href="/category/version/1.2.3/">1.2.3 版本</a>
</li>
<li class="cat-item cat-item-8">
<a href="/category/version/1.2.6/">1.2.6 版本</a>
</li>
<li class="cat-item cat-item-9">
<a href="/category/version/1.3/">1.3 版本</a>
</li>
<li class="cat-item cat-item-10">
<a href="/category/version/1.4/">1.4 版本</a>
</li>
<li class="cat-item cat-item-11">
<a href="/category/version/1.4.1/">1.4.1 版本</a>
</li>
<li class="cat-item cat-item-12">
<a href="/category/version/1.4.2/">1.4.2 版本</a>
</li>
<li class="cat-item cat-item-13">
<a href="/category/version/1.4.3/">1.4.3 版本</a>
</li>
<li class="cat-item cat-item-14">
<a href="/category/version/1.4.4/">1.4.4 版本</a>
</li>
<li class="cat-item cat-item-15">
<a href="/category/version/1.5/">1.5 版本</a>
</li>
<li class="cat-item cat-item-16">
<a href="/category/version/1.5.1/">1.5.1 版本</a>
</li>
<li class="cat-item cat-item-17">
<a href="/category/version/1.6/">1.6 版本</a>
</li>
<li class="cat-item cat-item-18">
<a href="/category/version/1.7/">1.7 版本</a>
</li>
<li class="cat-item cat-item-19">
<a href="/category/version/1.8/">1.8 版本</a>
</li>
<li class="cat-item cat-item-20">
<a href="/category/version/1.9/">1.9 版本</a>
</li>
<li class="cat-item cat-item-21">
<a href="/category/version/1.12-2.2/">Version 1.12 &amp; 2.2</a>
</li>
<li class="cat-item cat-item-22">
<a href="/category/version/3.0/">Version 3.0</a>
</li>
<li class="cat-item cat-item-23">
<a href="/category/version/3.1/">Version 3.1</a>
</li>
<li class="cat-item cat-item-24">
<a href="/category/version/all/">All</a>
</li>
</ul>
</li>
</ul>
</aside>
</div>
</article>